<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/lib/bootstrap.min.css"/>
		<link rel="stylesheet" href="css/lib/loading.css" />
		<script src="js/lib/bootstrap.min.js"></script>
		<script src="js/lib/jquery-1.11.0.js"></script>
		<script src="js/lib/loading.js"></script>
		<script src="js/lib/angular.min.js"></script>
		<script src="js/base.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style>
		body{
			font-size:12px;
		}		
		table,
		th,
		td {
			border: 1px solid grey;
			border-collapse: collapse;
			padding: 5px;
			vertical-align: middle !important;
		}		
		table td:nth-child(odd) {
			background-color: #f1f1f1;
			
		}
		table td:nth-child(even) {
			
		}
		table tr:nth-child(even) {
			background-color:#ffffff;
		}
	</style>
	<body ng-app="myApp" ng-controller="customersCtrl">		
		<div class="">
		<!--加载动画-->
		<div class="wrapper">
            <div id="loader-wrapper">
                <div id="loader"></div>
            </div>
        </div>
			<div style="padding:15px 5px 0px 5px;border:3px solid #ccc;margin-bottom:15px">
			<table class="table table-hover">				
				<tbody>
					<tr>
						<th colspan="12">用户交易明细查询：</th>
					</tr>
					<!--<tr>
						<td>手机号码:</td>
						<td colspan="6">
						<input id="msg0" type="text" class="form-control" style="width:280px;" placeholder="输入手机号码"/>
						</td>
						<td>黑名单类型:</td>
						<td colspan="6"><input id="msg1" placeholder="请输入0或1" class="form-control" type="text" style="width:280px;" />							
						</td>						
					</tr>-->
								
					<tr class="text-center">
					  <th class="text-center">序号</th>
					  <th class="text-center">用户ID</th>
					  <th class="text-center">手机</th>
					  <th class="text-center">通道</th>
					  <th class="text-center">交易金额</th>
					  <th class="text-center">实际金额</th>
					  <th class="text-center">额外费用</th>
					  <th class="text-center">费率</th>
					  <th class="text-center">类型</th>
					  <th class="text-center">状态</th>
					  <th class="text-center">商品</th>
					  <th class="text-center">结束时间</th>
					 </tr>
					 <tr class="active" ng-repeat="item in items">
					  	<td class="text-center">{{$index+1}}</td>
					    <td class="text-center">{{item.userid}}</td>
					    <td class="text-center">{{item.phone}}</td>
					    <td class="text-center">{{item.channelTag | modify0:item.channelTag}}</td>
					    <td class="text-center">{{item.amount | currency:"￥ "}}</td>
					    <td class="text-center">{{item.realAmount | currency:"￥ "}}</td>
					    <td class="text-center">{{item.extraFee | currency:"￥ "}}</td>
					    <td class="text-center">{{item.rate}}%</td>
					    <td class="text-center">{{item.status | modify:item.status}}</td>
					    <td class="text-center">{{item.type | modify2:item.type}}</td>
					    <td class="text-center">{{item.brandid}}</td>
					    <td class="text-center">{{item.createTime}}</td>
					  </tr>
					  <tr class="text-center">
					  	 <td colspan="12">
					  	 	第<input id="ye" ng-model="ye" style="width:25px;" placeholder="1" type="text"/>页  / 
					  	 	<button ng-click="cha()">跳转</button>总共{{pages}}条数据 /
					  	 </td>
					  </tr>
				</tbody>
			</table>					
			</div>
			</div>
		</div>
	</body>
	<script>
	var app = angular.module('myApp', []);
	/*自定义过滤器   1*/
		app.filter('modify0',function(){
			return function(input,param){
				if(param == "ZHONGMAO_WEIXIN"){
					return param = "微信支付"
				}
				if(param == "ZHONGMAO_ALIPAY"){
					return param = "支付宝支付"
				}
				if(param == "YILIAN"){
					return param = "易联支付"
				}
			}
		})
		/*自定义过滤器   2*/
		app.filter("modify",function(){
			return function(input,param){
				if(param == 0){
					return param = "充值"
				}
				if(param == 1){
					return param = "支付"
				}
				if(param == 2){
					return param = "提现"
				}
				if(param == 3){
					return param = "退单"
				}
				input = param
				return input
			}
		})
		/*自定义过滤器   3*/
		app.filter("modify2",function(){
			return function(input,param){
				if(param == 0){
					return param = "待完成"
				}
				if(param == 1){
					return param = "成功"
				}
				if(param == 2){
					return param = "取消"
				}
				input = param
				return input
			}
		})
        app.controller('customersCtrl', function($scope, $http ){
		/*用户交易明细查询查询*/
			$scope.cha=function(){
			var ye = document.getElementById("ye").value-1
			console.log(ye)
			$http({
			method:'POST',
			params:{size:10,page:ye},
			url: window.baseUrl+'transactionclear/payment/query/all'
			}).then(function successCallback(data){
					console.log("请求数据成功...")
					console.log(data)
					console.log(data.data.result)
					$scope.pages = data.data.result.totalElements
					console.log(data.data.result.content)
					$scope.items = data.data.result.content	
			}, function errorCallback(data) {
					console.log("请求数据失败...")
			     	console.log(data)
			});		
		};
		
		$http({
			method:'POST',
			params:{size:10,page:0},
			url: window.baseUrl+'transactionclear/payment/query/all'
		}).then(function successCallback(data){
				console.log("请求数据成功...")
				console.log(data.data.result)
				$scope.pages = data.data.result.totalElements
				console.log(data.data.result.content)
				$scope.items = data.data.result.content	
		}, function errorCallback(data) {
				console.log("请求数据失败...")
		     	console.log(data)
		});
	
		
});

</script>
</html>
